M

MLOG

Hrvatski

Naučite kako iskoristiti Next.js layoutove za izradu robusnih, skalabilnih i globalno svjesnih aplikacija. Otkrijte najbolje prakse za dijeljene komponente korisničkog sučelja.

Next.js Layouti: Svladavanje uzoraka zajedničkih komponenti korisničkog sučelja za globalne aplikacije

Next.js je postao temelj modernog web razvoja, poznat po svojoj sposobnosti da pojednostavi stvaranje performantnih aplikacija prilagođenih korisnicima. U središtu ove mogućnosti je učinkovito upravljanje komponentama korisničkog sučelja, a srž toga leži u snazi Next.js Layoutova. Ovaj sveobuhvatni vodič duboko zadire u zamršenosti korištenja Next.js Layoutova za izgradnju robusnih, skalabilnih i globalno svjesnih aplikacija. Istražit ćemo najbolje prakse za stvaranje zajedničkih komponenti korisničkog sučelja koje promiču ponovnu upotrebu koda, održivost i besprijekorno korisničko iskustvo za korisnike širom svijeta.

Razumijevanje važnosti layoutova u Next.js-u

U području web razvoja, posebno s okvirima poput Next.js-a, layouti služe kao arhitektonski temelj na kojem je izgrađeno korisničko sučelje vaše aplikacije. Oni su nacrt za dosljedne, ponovno upotrebljive elemente korisničkog sučelja koji oblikuju cjelokupno korisničko iskustvo. Razmišljanje o layoutovima u dobro strukturiranom dizajnu aplikacije omogućuje programerima da izbjegnu dupliciranje koda i pojednostavljuje održavanje. U suštini, oni pružaju okvir za:

Ključni koncepti i prednosti Next.js layoutova

1. Datoteke `_app.js` i `_document.js`

U Next.js-u, dvije posebne datoteke igraju ključnu ulogu u definiranju layoutova i globalnih konfiguracija: `_app.js` i `_document.js`. Razumijevanje njihove svrhe je temeljno.

2. Prednosti korištenja layoutova

Korištenje layoutova nudi bezbroj prednosti, posebno pri izgradnji velikih, složenih web aplikacija:

Implementacija uzoraka zajedničkih komponenti korisničkog sučelja

1. Stvaranje osnovne komponente layouta

Stvorimo jednostavnu komponentu layouta. Ova komponenta će uključivati zaglavlje, glavno područje sadržaja i podnožje. Dizajnirana je za dijeljenje na više stranica.

// components/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | My App</title>
        <meta name="description" content="My Next.js App" />
      </Head>
      <header>
        <h1>My App Header</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} My App. All rights reserved.</p>
      </footer>
    </>
  );
}

export default Layout;

U ovom primjeru, komponenta `Layout` prima `children` i `title` kao propse. `children` predstavlja sadržaj stranice koji će se renderirati unutar layouta, dok `title` postavlja naslovnu oznaku stranice za SEO.

2. Korištenje komponente layouta na stranici

Sada, primijenimo ovaj layout na jednu od vaših stranica (npr. `pages/index.js`).

// pages/index.js
import Layout from '../components/Layout';

function HomePage() {
  return (
    <Layout title="Home">
      <h2>Dobrodošli na početnu stranicu</h2>
      <p>Ovo je glavni sadržaj početne stranice.</p>
    </Layout>
  );
}

export default HomePage;

U `pages/index.js` uvozimo komponentu `Layout` i omotamo sadržaj stranice unutar nje. Također pružamo `title` specifičan za stranicu. Prop `children` u komponenti `Layout` bit će popunjen sadržajem između oznaka `<Layout>` u `index.js`.

3. Napredne značajke layouta

Globalna razmatranja za međunarodne aplikacije

Prilikom stvaranja layoutova za globalnu publiku, ključno je uzeti u obzir nekoliko aspekata internacionalizacije i globalizacije (i18n/g11n). Ove prakse osiguravaju da je vaša aplikacija pristupačna i jednostavna za korištenje osobama iz različitih kulturnih pozadina.

1. Internacionalizacija (i18n) i Lokalizacija (l10n)

2. Implementacija i18n u Next.js layoutovima

Za implementaciju i18n u Next.js-u možete koristiti razne biblioteke, kao što su `next-i18next` ili ugrađeni `next/router` za rješenja temeljena na rutiranju.

Evo pojednostavljenog primjera s `next-i18next` pomoću datoteke `_app.js`. Ovo postavlja i18n na razini aplikacije. Osigurajte da ste instalirali potrebne pakete pomoću `npm install i18next react-i18next next-i18next`. Ovaj primjer demonstrira pojednostavljenu integraciju i možda će trebati prilagodbe na temelju specifičnih zahtjeva.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // Uvezite svoje globalne stilove

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

U ovom `_app.js`, `appWithTranslation` pruža kontekst internacionalizacije aplikaciji.

Zatim, u svom layoutu, koristite `useTranslation` hook koji pruža `react-i18next`:

// components/Layout.js
import { useTranslation } from 'react-i18next';
import Head from 'next/head';

function Layout({ children, title }) {
  const { t } = useTranslation(); // Dohvatite funkciju prevođenja

  return (
    <>
      <Head>
        <title>{t('layout.title', { title })}</title>
        <meta name="description" content={t('layout.description')} />
      </Head>
      <header>
        <h1>{t('layout.header')}</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>{t('layout.footer', { year: new Date().getFullYear() })}</p>
      </footer>
    </>
  );
}

export default Layout;

Zatim biste imali svoje datoteke prijevoda, obično pohranjene u strukturi `public/locales/[locale]/[namespace].json`. Na primjer, `public/locales/en/common.json` mogao bi sadržavati:

{
  "layout": {
    "title": "{{title}} | My App",
    "description": "My Next.js App Description",
    "header": "My App Header",
    "footer": "© {{year}} My App. All rights reserved."
  }
}

A `public/locales/fr/common.json` (za francuski) mogao bi sadržavati:

{
  "layout": {
    "title": "{{title}} | Mon Application",
    "description": "Description de mon application Next.js",
    "header": "En-tête de mon application",
    "footer": "© {{year}} Mon application. Tous droits réservés."
  }
}

Napomena: Ovaj primjer pruža temeljni pristup integraciji i18n-a i treba dodatnu konfiguraciju (npr. detekciju jezika, postavljanje rutiranja). Za sveobuhvatne smjernice konzultirajte dokumentaciju `next-i18next`.

3. Responzivan dizajn i layouti

Responzivan dizajn je ključan za globalnu publiku. Vaš layout se mora prilagoditi različitim veličinama zaslona i uređajima. Koristite CSS okvire poput Bootstrapa, Tailwind CSS-a ili stvorite prilagođene medijske upite kako biste osigurali dosljedno iskustvo prilagođeno korisnicima na svim uređajima.

4. Razmatranja pristupačnosti

Pridržavajte se smjernica za pristupačnost (WCAG) kako biste svoju aplikaciju učinili upotrebljivom osobama s invaliditetom. To uključuje:

5. Formatiranje datuma i vremena

Različite regije imaju različite konvencije za formate datuma i vremena. Osigurajte da se datumi i vremena ispravno prikazuju na temelju korisničke lokalizacije. Biblioteke poput `date-fns` ili ugrađeni `Intl` API u JavaScriptu mogu to riješiti.

import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM d, yyyy', { locale: i18n.language });

  return <p>{formattedDate}</p>;
}

6. Formatiranje valute

Prikazujte novčane vrijednosti u ispravnom formatu za svaku lokalizaciju. API `Intl.NumberFormat` je vrijedan za rukovanje formatiranjem valute.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // Koristite i18n.language za lokalizaciju
    style: 'currency',
    currency: 'USD', // Ili dinamički odredite valutu na temelju korisničkih preferencija
  }).format(price);

  return <p>{formattedPrice}</p>
}

7. Jezici s desna na lijevo (RTL)

Ako vaša aplikacija treba podržavati jezike poput arapskog ili hebrejskog (RTL jezici), dizajnirajte svoj layout tako da to omogući. Razmotrite korištenje CSS svojstava poput `direction: rtl;` i prilagođavanje pozicioniranja UI elemenata.

8. Mreže za isporuku sadržaja (CDN) i performanse

Iskoristite CDN za posluživanje statičkih sredstava vaše aplikacije (slika, CSS, JavaScript) s poslužitelja geografski bliže vašim korisnicima. To smanjuje latenciju i poboljšava vrijeme učitavanja stranica za međunarodne korisnike. Next.js-ova ugrađena optimizacija slika i CDN integracija mogu značajno poboljšati performanse.

9. SEO optimizacija za globalna tržišta

Optimizacija za tražilice (SEO) ključna je za privlačenje korisnika diljem svijeta. Koristite sljedeće tehnike:

Primjer hreflang oznaka u `` vaše komponente `Layout`:


<Head>
  <title>{t('layout.title', { title })}</title>
  <meta name="description" content={t('layout.description')} />
  <link rel="alternate" href="https://www.example.com/" hreflang="x-default" />  {
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr" />
  // Više jezičnih varijanti
</Head>

Napredne strategije layouta

1. Podjela koda s layoutovima

Next.js automatski izvodi podjelu koda za poboljšanje performansi, ali to ponašanje možete precizirati pomoću dinamičkih uvoza, posebno unutar vaših layoutova. Dinamičkim uvozom većih komponenti možete smanjiti početnu veličinu JavaScript paketa, što dovodi do bržeg početnog vremena učitavanja.


import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/LargeComponent'));

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- Dinamički učitana komponenta -->
      </main>
      <footer>...</footer>
    </>
  );
}

U primjeru, `LargeComponent` se učitava dinamički. Dinamički uvoz odgađa preuzimanje ove komponente dok zapravo nije potrebna.

2. Layouti s renderiranjem na strani poslužitelja (SSR)

Next.js-ove SSR mogućnosti omogućuju vam predrenderiranje sadržaja na poslužitelju, poboljšavajući SEO i početno vrijeme učitavanja. Možete implementirati SSR unutar svojih layoutova za dohvaćanje podataka prije nego što se stranica isporuči klijentu. Ovo je posebno važno za sadržaj koji se često mijenja ili koji bi trebao biti indeksiran od strane tražilica.

Korištenjem `getServerSideProps` unutar stranice, možete proslijediti podatke layoutu:


// pages/posts/[id].js
import Layout from '../../components/Layout';

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function PostPage({ post }) {
  return (
    <Layout title={post.title}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Layout>
  );
}

export default PostPage;

Funkcija `getServerSideProps` dohvaća podatke objave. Podaci `post` se zatim prosljeđuju kao prop komponenti `Layout`.

3. Layouti s generiranjem statičkih stranica (SSG)

Za sadržaj koji se ne mijenja često, SSG pruža značajne prednosti u performansama. Predrenderira stranice u vrijeme izgradnje, generirajući statičke HTML datoteke koje se isporučuju izravno korisniku. Da biste koristili SSG, implementirajte funkciju `getStaticProps` u svojim komponentama stranice, a podaci se mogu proslijediti layoutu.


// pages/about.js
import Layout from '../components/Layout';

export async function getStaticProps() {
  const aboutData = { title: 'O nama', content: 'Neke informacije o našoj tvrtki.' };
  return {
    props: {
      aboutData,
    },
  };
}

function AboutPage({ aboutData }) {
  return (
    <Layout title={aboutData.title}>
      <h2>{aboutData.title}</h2>
      <p>{aboutData.content}</p>
    </Layout>
  );
}

export default AboutPage;

U ovom SSG primjeru, `getStaticProps` dohvaća podatke u vrijeme izgradnje, a zatim ih prosljeđuje `AboutPage`, koja se zatim renderira pomoću komponente `Layout`.

4. Ugniježđeni layouti

Za složene aplikacije, možda će vam trebati ugniježđeni layouti. To znači imati layoutove unutar layoutova. Na primjer, mogli biste imati glavni layout aplikacije, a zatim koristiti različite layoutove za određene dijelove vaše web stranice. To omogućuje preciznu kontrolu nad korisničkim sučeljem.


// components/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Glavno zaglavlje</header>
      <main>{children}</main>
      <footer>Glavno podnožje</footer>
    </>
  );
}

export default MainLayout;


// components/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Navigacija sekcije</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// pages/section/[page].js
import MainLayout from '../../components/MainLayout';
import SectionLayout from '../../components/SectionLayout';

function SectionPage({ page }) {
  return (
    <MainLayout>
      <SectionLayout>
        <h1>Stranica sekcije: {page}</h1>
        <p>Sadržaj za stranicu sekcije {page}.</p>
      </SectionLayout>
    </MainLayout>
  );
}

export async function getServerSideProps(context) {
  const { page } = context.query;
  return {
    props: {
      page,
    },
  };
}

export default SectionPage;

U ovom slučaju, `SectionPage` je omotan s `MainLayout` i `SectionLayout` kako bi se stvorila ugniježđena struktura layouta.

Najbolje prakse i savjeti za optimizaciju

1. Kompozicija komponenti

Koristite kompoziciju komponenti. Podijelite svoje layoutove i elemente korisničkog sučelja na manje, ponovno upotrebljive komponente. To poboljšava čitljivost i održivost koda.

2. Praćenje performansi

Kontinuirano pratite performanse svojih layoutova i aplikacije pomoću alata kao što su Google Lighthouse ili WebPageTest. Ovi alati vam mogu pomoći identificirati uska grla u performansama i područja za optimizaciju.

3. Strategije predmemoriranja

Implementirajte strategije predmemoriranja za smanjenje opterećenja poslužitelja i poboljšanje vremena odziva. Razmislite o predmemoriranju često pristupanih podataka, korištenju predmemoriranja preglednika za statička sredstva i implementaciji mreže za isporuku sadržaja (CDN) za predmemoriranje sadržaja bliže korisniku.

4. Lijeno učitavanje

Primijenite lijeno učitavanje za slike i druge nekritične komponente. Ovaj pristup odgađa učitavanje resursa dok ne postanu potrebni, smanjujući početno vrijeme učitavanja stranice.

5. Izbjegavajte pretjerano ponovno renderiranje

Optimizirajte svoje komponente kako biste izbjegli nepotrebno ponovno renderiranje. Koristite `React.memo`, `useMemo` i `useCallback` za memoiziranje komponenti i funkcija. Pravilno koristite `key` prop prilikom renderiranja popisa komponenti kako biste pomogli Reactu da učinkovito identificira promjene.

6. Testiranje

Implementirajte temeljito testiranje svojih komponenti layouta, uključujući unit testove i integracijske testove, kako biste osigurali da funkcioniraju kako se očekuje i održavaju dosljedno ponašanje. Testirajte layoutove u različitim veličinama zaslona i lokalizacijama.

Zaključak

Next.js Layouti nude moćne i svestrane alate za izgradnju iznimnih web aplikacija. Svladavanjem tehnika o kojima se raspravljalo u ovom vodiču, možete stvoriti dobro strukturirana, održiva i performantna korisnička sučelja. Ne zaboravite prihvatiti najbolje prakse internacionalizacije i globalizacije kako biste osigurali da vaša aplikacija odjekuje kod globalne publike. Kombiniranjem snage Next.js-a s promišljenim pristupom layoutovima, bit ćete dobro opremljeni za stvaranje modernih, skalabilnih i univerzalno pristupačnih web iskustava.

Next.js Layouti: Svladavanje uzoraka zajedničkih komponenti korisničkog sučelja za globalne aplikacije | MLOG